import 'package:f_itshop/pages/cart/cart_page.dart';
import 'package:f_itshop/pages/mine/mine_page.dart';
import 'package:flutter/material.dart';

import '../category/category_page.dart';
import '../home/home_page.dart';
import 'frames_animation.dart';

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  /// 页面列表
  List pages = [HomePage(), CategoryPage(), CartPage(), MinePage()];

  /// 当前item的索引，默认显示首页
  int _currentIndex = 0;

  /// 存放帧动画组件的key
  List<GlobalKey<FramesAnimationState>> framesKeys = [
    GlobalKey<FramesAnimationState>(debugLabel: 'home_key'),
    GlobalKey<FramesAnimationState>(debugLabel: 'category_key'),
    GlobalKey<FramesAnimationState>(debugLabel: 'cart_key'),
    GlobalKey<FramesAnimationState>(debugLabel: 'mine_key'),
  ];

  ///记录当前选中的item,默认首页就是上一次的索引
  int _lastIndex = 0;

  /// 加载首页帧动画图片
  List<Image> _loadHomeFrames() {
    List<Image> images = [];

    for (var i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          'assets/home_frames/home_frame_$i.png',
          width: 20.0,
          height: 20.0,
          gaplessPlayback: true,
        ),
      );
    }

    return images;
  }

  /// 加载分类帧动画图片
  List<Image> _loadCategoryFrames() {
    List<Image> images = [];

    for (var i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          'assets/category_frames/category_frame_$i.png',
          width: 20.0,
          height: 20.0,
          gaplessPlayback: true,
        ),
      );
    }

    return images;
  }

  /// 加载购物车帧动画图片
  List<Image> _loadCartFrames() {
    List<Image> images = [];

    for (var i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          'assets/cart_frames/cart_frame_$i.png',
          width: 20.0,
          height: 20.0,
          gaplessPlayback: true,
        ),
      );
    }

    return images;
  }

  /// 加载我的帧动画图片
  List<Image> _loadMineFrames() {
    List<Image> images = [];

    for (var i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          'assets/mine_frames/mine_frame_$i.png',
          width: 20.0,
          height: 20.0,
          gaplessPlayback: true,
        ),
      );
    }

    return images;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //内容
      body: pages[_currentIndex],
      //底部导航
      bottomNavigationBar:
      // 指定新的主题样式
      Theme(
        data: ThemeData(
          splashColor: Colors.transparent, // 点击时的背景色为透明
          highlightColor: Colors.transparent, // 长按时的背景色为透明
        ),
        child: BottomNavigationBar(
          // 统一选中和未选中的颜色
          selectedItemColor: Color(0xFF3CCEAF),
          unselectedItemColor: Color(0xFF383838),

          // 统一选中和未选中的字号
          selectedFontSize: 10,
          unselectedFontSize: 10,
          // 指定当前选中的item
          currentIndex: _currentIndex,
          // 监听底部导航点击事件
          onTap: (int index) {
            // 判断当前选中的item是否是上一次选中的索引，如果是，则不执行任何操作
            if (index == _lastIndex) {
              return;
            }
            //1.启动本次被选中item的帧动画
            framesKeys[index].currentState?.startAnimation();
            //2.重置上次被选中item的帧动画
            framesKeys[_currentIndex].currentState?.resetAnimation();
            //3.记录当前选中的item
            _lastIndex = index;
            setState(() {
              _currentIndex = index;
            });
          },
          //底部导航样式
          // 解决了items元素个数超过三个时的显示问题
          type: BottomNavigationBarType.fixed,
          items: [
            //首页
            BottomNavigationBarItem(
              //icon: Icon(Icons.home)
              //  选中和未选中的图标
              // icon: Image.asset('assets/home_nor.png', gaplessPlayback: true),
              // activeIcon: Image.asset(
              //   'assets/home_sel.png',
              //   gaplessPlayback: true,
              // ),
              icon: FramesAnimation(
                initIndex: 0,
                key: framesKeys[0],
                images: _loadHomeFrames(),
              ),
              label: '首页',
            ),
            //分类
            BottomNavigationBarItem(
              //icon: Icon(Icons.category),
              // icon: Image.asset(
              //   'assets/category_nor.png',
              //   gaplessPlayback: true,
              // ),
              // activeIcon: Image.asset(
              //   'assets/category_sel.png',
              //   gaplessPlayback: true,
              // ),
              icon: FramesAnimation(
                initIndex: 1,
                key: framesKeys[1],
                images: _loadCategoryFrames(),
              ),
              label: '分类',
            ),
            //购物车
            BottomNavigationBarItem(
              //icon: Icon(Icons.shopping_cart),
              // icon: Image.asset('assets/cart_nor.png', gaplessPlayback: true),
              // activeIcon: Image.asset(
              //   'assets/cart_sel.png',
              //   gaplessPlayback: true,
              // ),
              icon: FramesAnimation(
                initIndex: 2,
                key: framesKeys[2],
                images: _loadCartFrames(),
              ),
              label: '购物车',
            ),
            //我的
            BottomNavigationBarItem(
              //icon: Icon(Icons.person),
              // icon: Image.asset('assets/mine_nor.png', gaplessPlayback: true),
              // activeIcon: Image.asset(
              //   'assets/mine_sel.png',
              //   gaplessPlayback: true,
              // ),
              icon: FramesAnimation(
                initIndex: 3,
                key: framesKeys[3],
                images: _loadMineFrames(),
              ),
              label: '我的',
            ),
          ],
        ),
      ),
    );
  }
}
